<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table</title>
		
		<style type="text/css">
			.blue-txt {
				color: blue;
			}
			td {
				text-align: center;
				width: 250px;
			}
			.del {
				color: blue;
				cursor: pointer;
			}
			.add {
				color: blue;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<table border="1" id="table">
			<tr>
				<th width="200">
					序号
				</th>
				<th>
					姓名
				</th>
				<th>
					班级
				</th>
				<th>
					专业
				</th>
				<th>
					删除
				</th>
				<th>
					添加
				</th>
			</tr>
		</table>
	
	</body>
	
	<script type="text/javascript">
		window.onload = function() {
			// 数据源
			let obj = [{
				id: 1,
				name: '李四',
				className: '软件202',
				subject: '软件技术'
			},{
				id: 2,
				name: '张三',
				className: '软件203',
				subject: '软件技术'
			},{
				id: 3,
				name: '吴签',
				className: '软件201',
				subject: '软件技术'
			}]
			
			let oriHtml = document.getElementById('table').innerHTML
			
			draw()
			
			
			function draw() {
				// 当前table的html代码
				let addbtn = document.getElementById("add")
				let strOri = oriHtml
				console.dir(strOri)
				for (let i = 0; i < obj.length; i++) {
					strOri += `
						<tr>
							<td>
								${i+1}
							</td>
							<td>
								${obj[i].name}
							</td>
							<td>
								${obj[i].className}
							</td>
							<td>
								${obj[i].subject}
							</td>
							<td>
								<span class="del" id="${obj[i].id}">
									删除
								</span>
							</td>
							<td>
								<span class="add" id="{obj[i].id}">
									添加
							</td>
						</tr>
					`
				}
				document.getElementById('table').innerHTML = strOri
				// 绑定点击事件
				for (let i = 0; i < obj.length; i++) {
					document.getElementById(obj[i].id).onclick = function() {
						console.log(obj[i].id)
						// 根据id删除对象数据 - 过滤出来数据
						let newData = []
						for (let j = 0; j < obj.length; j++) {
							if(obj[j].id !== obj[i].id) {
								newData.push(obj[j])}
						}
						obj = newData
						draw()
					}
					for (let i =0;i<obj.length;i++){
						document.getElementById(-obj[i].id).onclick= function(){
						console.log(-obj[i].id)
						let newData = []
						for (let j=0;j<obj.length;j++){
							newData.push(obj[j])
						}
						newData.push({
							id:obj.length+1,
							name: '',
							classname: '',
							subject: '',
							})
							obj= newData
							draw()
						}
					}
					
				}
				
			}
			
		}
	</script>
	
</html>